<template>
	<view>
		<!-- 分类导航 -->
		<swiper class="swiper-fixed" duration="300" indicator-dots="true" indicator-color="#bfbfbf" indicator-active-color="#e8475c">
			<swiper-item class="type-section" key="0">
				<view class="type-item" v-for="(item, index) in displayList" :key="index" :data-id="index" @tap="typeChange" v-if="index < 5">
					<image :src="item.imageUrl" lazy-load="true"></image>
					<text>{{ item.name }}</text>
				</view>
			</swiper-item>
			<swiper-item class="type-section" key="1">
				<view class="type-item" v-for="(item, index) in displayList" :key="index" :data-id="index" @tap="typeChange" v-if="index > 4">
					<image :src="item.imageUrl" lazy-load="true"></image>
					<text>{{ item.name }}</text>
				</view>
			</swiper-item>
		</swiper>
		<view style="padding-top: 210rpx;">
			<view class="content-section" :style="{'height':sectionHeight}" v-for="(item, index) in displayList" :key="index" :id="'main-' + index">
				<view class="type-title" v-if="item.productList.length > 0">— {{ item.name }} —</view>
				<view class="p-section" v-for="(pItem, pindex) in item.productList" :key="pindex" @tap="goProduct(pItem)" :id="'main-' + index + '-' + pindex">
					<view class="shopItem">
						<icon-font type="shop" size="18" color="#aaaaaa"></icon-font>
						<text class="padding-left-xs">{{ pItem.shopTitle }}</text>
					</view>
					<image :src="pItem.pictUrl" style="width: 100%;height: 250px;" lazy-load="true"></image>
					<view class="titleItem">
						<view class="basis-l titleInfo">
							<text class="type">{{ pItem.userType | shopType }}</text>
							{{ pItem.title }}
						</view>
						<view class="basis-s padding-left-sm">
							<view class="text-orange">{{ pItem.volume }}</view>
							<view>月销量</view>
						</view>
					</view>
					<view class="juanItem">
						<view class="basis-l padding-right text-pink">
							<view v-if="pItem.couponAmount != null">
								优惠券：
								<text class="text-bold">￥{{ pItem.couponAmount }}</text>
							</view>
							<view v-if="pItem.couponAmount != null">
								有限期：
								<text class="text-sm">{{ pItem.couponStartTime | formatShortDate }} - {{ pItem.couponEndTime | formatShortDate }}</text>
							</view>
						</view>
						<view class="basis-s padding-left-sm">
							<view class="text-bold text-red">￥{{ pItem.zkFinalPrice | Fixed2 }}</view>
							<view class="text-gray" style="text-decoration: line-through;">￥{{ pItem.reservePrice | Fixed2 }}</view>
						</view>
					</view>
					<view class="btnItem" @tap.stop="">
						<view class="btnInfo bg-gradual-pink-btn" @tap="goShare(pItem)">分享 赚￥{{ pItem.commissionAmount | Fixed2 }}</view>
						<!-- #ifdef APP-PLUS -->
						<view class="btnInfo bg-gradual-pink-btn" @tap="navTaobao(pItem)">购买 省￥{{ pItem.commissionAmount, pItem.couponAmount | commissionCoupon }}</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="btnInfo bg-gradual-pink-btn" @tap="copyWord(pItem)">复制淘口令</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
		<dialog-box :modalName="modalName" @cancelLogin="cancelLogin" @login="login"></dialog-box>
		<mescroll-top :option="toTopOption" v-model="isShowToTop" @click="toTopClick"></mescroll-top>
		<search-clipboard :searchModal="searchModal" @resetModal="resetSearchModal"></search-clipboard>
		<loading :loadModal="loadModal"></loading>
		<tab-bar :current="1"></tab-bar>
	</view>
</template>

<script>
import mescrollTop from '../../components/mescroll-uni/components/mescroll-top.vue';
import tabBar from '../../components/tab-bar.vue';
var _self;
export default {
	components: {
		tabBar,
		mescrollTop
	},
	data() {
		return {
			toTopOption: {
				src: '/static/icon/totop.png',
				offset: 1000,
				right: 20,
				bottom: 120,
				radius: 50,
				width: 72
			},
			displayList: [],
			isShowToTop: false,
			modalName: '', //对话框
			loadMoreType: 0, // 0:还未加载，1：加载中，2：加载完
			loadModal: true,
			searchModal:this.$util.initClipboard(),
			scrollHeight:8736,//手机型号
			sectionHeight: '18200rpx'
		};
	},
	onLoad() {
		_self = this;
		uni.hideTabBar();
		_self.setScrollHeight()
		_self.getDisplayList();
	},
	onShow(){
		setTimeout(() => {
			_self.$util.searchClipboard(_self.$store.state.searchContent).then(res => {
				_self.searchModal = res;
			});
		}, 200);
	},
	methods: {
		resetSearchModal() {
			_self.searchModal = _self.$util.initClipboard();
		},
		setScrollHeight(){
			const sys = uni.getSystemInfoSync();
			if(sys.platform == "ios"){
				_self.scrollHeight=9066;
				_self.sectionHeight='18130rpx';
			}else{
				_self.scrollHeight=8736;
				_self.sectionHeight='18200rpx';
			}
		},
		getDisplayList() {
			_self.loadMoreType = 0;
			_self.$http.httpRequest('taobao/productRecommendCatalog/displayList', null, false).then(res => {
				if (res._tranStatus) {
					let tmplist = res._data.list;
					_self.displayList = [];
					tmplist.forEach((item, index) => {
						_self.displayList.push({
							code: item.code,
							name: item.name,
							imageUrl: item.imageUrl,
							productList: []
						});
					});
					_self.getProductList(_self.displayList[0].code, 0, false);
					_self.loadMoreProduct();
					_self.loadModal = false;
				}
			});
		},
		//goflg 是否跳转至定位view
		getProductList(code, index, goflg) {
			//根据分类获取产品列表
			const param = {
				catalogId: code
			};
			_self.$http.httpRequest('taobao/productRecommend/catalogProductList', param, false).then(res => {
				if (res._tranStatus) {
					let tmplist = res._data.list;
					let tmpdisplaylist = _self.displayList[index];
					tmpdisplaylist.productList = tmplist;
				}
				if (goflg) {
					_self.scrollToProducts(index);
				}
			});
		},
		typeChange(e) {
			//切换类别
			let index = e.currentTarget.dataset.id;
			if (_self.displayList[index].productList.length == 0) {
				_self.getProductList(_self.displayList[index].code, index, true);
			} else {
				_self.scrollToProducts(index);
			}
		},
		scrollToProducts(index) {
			let position = _self.scrollHeight * index;
			uni.pageScrollTo({
				scrollTop: position,
				duration: 0
			});

			let view = uni.createSelectorQuery().select('#main-'+index);
			view.boundingClientRect(data => {
				console.log('scrollToProducts','#main-'+index,data,data.top)
				let position = data.top // 到屏幕顶部的距离
				/* uni.pageScrollTo({
				    scrollTop: position,
				    duration: 0
				}); */
			}).exec();
		},
		loadMoreProduct() {
			//加载其他剩余的类别的商品
			if (_self.loadMoreType == 0) {
				_self.loadMoreType = 1;
				let index = 1,
					len = _self.displayList.length;
				var timerFlg = setInterval(function() {
					if (index < len) {
						let item = _self.displayList[index];
						if (item.productList.length == 0) {
							_self.getProductList(item.code, index, false);
						}
						index++;
					} else {
						clearInterval(timerFlg);
						_self.loadMoreType = 2;
					}
				}, 1000);
			}
		},
		toTopClick() {
			//滚动条返回顶部
			_self.scrollToProducts(0);
		},
		goProduct(pd) {
			uni.navigateTo({
				url: '../product/main?cnt=' + encodeURIComponent(JSON.stringify(pd))
			});
		},
		goShare(pItem) {
			if (_self.$util.Landing()) {
				if (_self.$util.ExistRelationId()) {
					//跳转至分享页面
					uni.navigateTo({
						url: '../product/share?cnt=' + encodeURIComponent(JSON.stringify(pItem))
					});
				}
			} else {
				_self.modalName = 'login';
			}
		},
		navTaobao(pItem) {
			//立即购买 去 淘宝
			if (_self.$util.Landing()) {
				if (_self.$util.ExistRelationId()) {
					//#ifdef APP-PLUS
					let plug = uni.requireNativePlugin('UZK-Alibcsdk');
					let url = pItem.promotedUrl + '&relationId=' + _self.$util.getRelationId();
					plug.init(result => {
						plug.openurl({
							url: url,
							linkkey: 'taobao',
							adzoneid: '103062550066',
							pid: 'mm_1159700186_1658850404_110381300098',
							nativeFailedMode: 'download',
							appkey: '29510703',
							opentype: 'native'
						});
					});
					//#endif
				}
			} else {
				_self.modalName = 'login';
			}
		},
		copyWord(pItem) {
			//复制淘口令
			//#ifdef MP-WEIXIN
			if (_self.$util.Landing()) {
				_self.$util.taoKouLingCreate(pItem.promotedUrl).then(res => {
					uni.setClipboardData({
						data: res
					});
				});
			} else {
				_self.modalName = 'login';
			}
			//#endif
		},
		cancelLogin() {
			//取消登录
			_self.modalName = '';
		},
		login() {
			//确认登录
			_self.modalName = '';
			uni.navigateTo({
				url: '../access/main'
			});
		}
	},
	onPageScroll(e) {
		_self.isShowToTop=parseInt(e.scrollTop) >500;
	},
	onPullDownRefresh() {
		_self.getDisplayList();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	},

	// #ifndef MP
	// 标题栏input搜索框点击
	onNavigationBarSearchInputClicked: async function(e) {
		uni.switchTab({
			url: '../sou/main?type=0'
		});
	}
	// #endif
};
</script>

<style lang="scss">
.swiper-fixed {
	z-index: 9998;
	position: fixed;
	left: 0;
	width: 100%;
	height: 205rpx;
}
/* 大类导航 */
.type-section {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	background: #fff;
	.type-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 20%;
		padding: 5rpx 5rpx 25rpx 5rpx;
		image {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
			opacity: 0.7;
			box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
		}
	}
}
.content-section {
	padding-left: 20rpx;
	padding-right: 20rpx;
	overflow: hidden;
	.type-title {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		display: flex;
		justify-content: center;
		font-weight: bold;
		font-size: 44rpx;
	}
	.p-section {
		background-color: white;
		color: #000000;
		border-radius: 6rpx;
		margin-bottom: 30rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		&:last-child {
			margin-bottom: 0px;
		}
		.shopItem {
			display: flex;
			justify-content: center;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
		}
		.titleItem {
			display: flex;
			flex-wrap: wrap;
			padding-top: 15rpx;
			padding-left: 10rpx;
			padding-bottom: 15rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			.titleInfo {
				padding-right: 20rpx;
				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
				font-weight: bold;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				.type {
					background-color: #ec343b;
					color: #ffffff;
					padding: 2rpx 10rpx;
					margin-right: 10rpx;
				}
			}
		}
		.juanItem {
			display: flex;
			flex-wrap: wrap;
			padding-top: 15rpx;
			padding-left: 10rpx;
		}
		.btnItem {
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			.btnInfo {
				display: flex;
				justify-content: center;
				width: 280rpx;
				height: 60rpx;
				color: #fff;
				padding: 10rpx 0rpx;
				box-shadow: 2rpx 4rpx 10rpx #d03032;
				border-radius: 80px;
			}
		}
	}
}
</style>
